<template>
  <div class="InfoAdmin">
      <!-- 新增 -->
      <el-form :inline="true"  class="demo-form-inline" size="small">
        <el-form-item>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
      <!-- 分页  1: 1-10 2:11-20 slice((当前页数-1)*每页条数,当前页数*当前条数) -->
      <!-- <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%"> -->
      <el-table :data="tableDate" border style="width: 100%">
        <el-table-column prop="name"  label="姓名" align="center"></el-table-column>
        <el-table-column prop="sex_text"  label="性别" align="center"></el-table-column>
        <el-table-column prop="age"  label="年龄" align="center"></el-table-column>
        <el-table-column prop="father"  label="父亲" align="center"></el-table-column>
        <el-table-column prop="mather"  label="母亲" align="center"></el-table-column>
        <el-table-column prop="address"  label="家庭住址" align="center"></el-table-column>
        <el-table-column prop="time"  label="入校时间" align="center"></el-table-column>
        <el-table-column prop="phone"  label="联系方式" align="center"></el-table-column>
        <el-table-column  label="操作" align="center">
           <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
           </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30,50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
     </el-pagination> -->
     <!-- 新增弹框 -->
     <el-dialog :title="state?'添加学生信息':'修改学生信息'" :visible.sync="dialogFormVisible" width="600px">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="姓名" prop="name" label-width="80px">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex" label-width="80px">
            <el-radio v-model="form.sex" label="1">男</el-radio>
            <el-radio v-model="form.sex" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="年龄" prop="age" label-width="80px">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父亲姓名" prop="father" label-width="80px">
            <el-input v-model="form.father" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="母亲姓名" prop="mather" label-width="80px">
            <el-input v-model="form.mather" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址" prop="address" label-width="80px">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="入校时间" prop="time" label-width="80px">
            <el-date-picker v-model="form.time" type="datetime" 
             format="yyyy 年 MM 月 dd 日"
             placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone" label-width="80px">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sure('form')">确 定</el-button>
          <!-- <el-button @click="resetForm('form')">重置</el-button> -->
        </div>
      </el-dialog>
  </div>
</template>
<script>
import {getInfoData,changeInfoData,delInfoData} from '@/utils/table.js'
export default{
  name:'InfoAdmin',
  data(){
    return{
      tableDate:[],
      total:0,
      dialogFormVisible:false,
      form:{
        name:'',
        sex:'1',
        age:'',
        father:'',
        mather:'',
        address:'',
        time:'',
        phone:'',
      },
      rules:{
        name:[{required:true,message:'请输入姓名'}],
        sex:[{required:true}],
        age:[{required:true,message:'请输入年龄'}],
        address:[{required:true,message:'请输入地址'}],
        time:[{required:true,message:'请输入入学时间'}],
        phone:[{required:true,message:'请输入联系方式'}],
      },
      state:true,  // 新增和编辑的标识
    }
  },
  created(){
    getInfoData(this,'/info')
  },
  methods:{
    add(){
        this.state = true;
        this.dialogFormVisible = true;
        this.$nextTick(()=>{
          // 新增时 把表单里的数据清空    点击编辑  关闭  再点击新增
          this.form={
              name:'',
              sex:'1',
              age:'',
              father:'',
              mather:'',
              address:'',
              time:'',
              phone:'',
          },
          // resetFields 只能清掉新输入的数据  输入框开始没有值  新输入值 可以全部清空 如果输入框开始有值 再新输入值 只能清掉新输入的值  没有输入新值 原来的值不会清掉
          // resetFields 可以重置表单 消除验证
          console.log('refs',this.$refs["form"])
          this.$refs["form"].resetFields();
        })
    },
    edit(row){
        this.state = false;
        // 避免在修改的同时 表格数据同步在改变
        this.form = {...row};
        this.dialogFormVisible = true;
    },
    del(row){
      delInfoData(this,'/info',row.id,getInfoData)
    },
    // 重置
    // resetForm(formName) {
    //     this.$refs[formName].resetFields();
    // },
    //弹框确定
    sure(form){
       this.$refs[form].validate(async valid=>{
          if(valid){
             // 新增
            //  if(this.state){
            //     changeInfoData(this,'post','/info',this.form,getInfoData)
            //  }else{
            //     changeInfoData(this,'put','/info',this.form,getInfoData)
            //  }
            let methods = '';
            this.state ? methods = 'post' :  methods = 'put'
            changeInfoData(this,methods,'/info',this.form,getInfoData)
          }else{

          }
       })
    },
  }
}
</script>
<style lang="scss" scoped>
.InfoAdmin{
  .el-pagination{
    margin-top:20px;
  }

}

</style>